[#import "macro/page.ftl" as mac]
[@mac.page title="home page"; choice]
    [#if choice == "top_css"]
    <style scoped>
        .layout {
            border: 1px solid #d7dde4;
            background: #f5f7f9;
            position: relative;
            border-radius: 4px;
            overflow: hidden;
        }

        .layout-breadcrumb {
            padding: 10px 15px 0;
        }

        .layout-content {
            min-height: 200px;
            margin: 1px;
            overflow: hidden;
            background: #fff;
            border-radius: 4px;
        }

        .layout-content-main {
            padding: 10px;
        }

        .layout-copy {
            text-align: center;
            padding: 10px 0 20px;
            color: #9ea7b4;
        }

        .layout-menu-left {
            background: #464c5b;
        }

        .layout-header {
            height: 60px;
            background: #fff;
            box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
        }

        .layout-logo-left {
            width: 90%;
            height: 30px;
            background: #5b6270;
            border-radius: 3px;
            margin: 15px auto;
        }

        .layout-ceiling-main a {
            color: #9ba7b5;
        }

        .layout-hide-text .layout-text {
            display: none;
        }

        .ivu-col {
            transition: width .2s ease-in-out;
        }

        .layout-ceiling {
            background: #464c5b;
            padding: 10px 0;
            overflow: hidden;
        }

        .layout-ceiling-main {
            float: right;
            margin-right: 15px;
        }

        .layout-ceiling-main a {
            color: #9ba7b5;
        }
    </style>
    [/#if]

[#--body--]
    [#if choice == "body"]

    [#--[@shiro.user]
        [@spring.message "greeting.msg" /], 当前用户:<b>[@shiro.principal/]</b>, <a
            href="${basePath}/login?logout">退出</a></br>
    [/@shiro.user]

    [@shiro.guest]
    您当前是游客：<a href="${basePath}/login">登录</a>
    [/@shiro.guest]

    [@shiro.hasPermission name="menu:update:*"]
    <p>hasPermission:i have permission user:update</p>
    [/@shiro.hasPermission]

    [@shiro.hasAnyPermissions name="menu:update:1,menu:delete:1"]
    <p>hasAnyPermissions:i have permission user:update,user:delete</p>
    [/@shiro.hasAnyPermissions]--]
    <div id="app">
        <div class="layout" :class="{'layout-hide-text': spanLeft < 5}">
            <div class="layout-ceiling">
                <div class="layout-ceiling-main">
                    <a href="#">注册登录</a> |
                    <a href="#">帮助中心</a> |
                    <a href="#">安全中心</a> |
                    <a href="#">服务大厅</a>
                </div>
            </div>
            <row type="flex">
                <i-col :span="spanLeft" class="layout-menu-left">
                    <i-Menu active-name="1-1" theme="dark" width="auto" :open-names="['1']">
                        <div class="layout-logo-left"></div>
                        <Submenu name="1">
                            <template slot="title">
                                <Icon type="ios-navigate"></Icon>
                                用户管理
                            </template>
                            <Menu-Item name="1-1">用户列表</Menu-Item>
                            <Menu-Item name="1-2">选项 2</Menu-Item>
                            <Menu-Item name="1-3">选项 3</Menu-Item>
                        </Submenu>
                        <Submenu name="2">
                            <template slot="title">
                                <Icon type="ios-keypad"></Icon>
                                导航二
                            </template>
                            <Menu-item name="2-1">选项 1</Menu-item>
                            <Menu-item name="2-2">选项 2</Menu-item>
                        </Submenu>
                        <Submenu name="3">
                            <template slot="title">
                                <Icon type="ios-analytics"></Icon>
                                导航三
                            </template>
                            <Menu-Item name="3-1">选项 1</Menu-Item>
                            <Menu-Item name="3-2">选项 2</Menu-Item>
                        </Submenu>
                    </i-Menu>
                </i-col>
                <i-col :span="spanRight">
                    <div class="layout-breadcrumb">
                        <breadcrumb>
                            <breadcrumb-item href="#">首页</breadcrumb-item>
                            <breadcrumb-item href="#">应用中心</breadcrumb-item>
                            <breadcrumb-item>某应用</breadcrumb-item>
                        </breadcrumb>
                    </div>
                    <div class="layout-content">
                        <div class="layout-content-main">
                            <template>
                                <i-table width="550" height="200" border :columns="columns2" :data="data4"></i-table>
                            </template>
                        </div>
                    </div>
                    <div class="layout-copy">
                        2011-2016 &copy; TalkingData
                    </div>
                </i-col>
            </row>
        </div>
    </div>
    [/#if]

    [#if choice == "bottom_js"]
    [#--<script type="text/javascript" src="${basePath}[@spring.url '/js/abc.js'][/@spring.url]"></script>--]

    <script>
        new Vue({
            el: '#app',
            data: {
                spanLeft: 5,
                spanRight: 19,
                columns2: [
                    {
                        title: '姓名',
                        key: 'name',
                        width: 100,
                        fixed: 'left'
                    },
                    {
                        title: '年龄',
                        key: 'age',
                        width: 100
                    },
                    {
                        title: '省份',
                        key: 'province',
                        width: 100
                    },
                    {
                        title: '市区',
                        key: 'city',
                        width: 100
                    },
                    {
                        title: '地址',
                        key: 'address',
                        width: 200
                    },
                    {
                        title: '邮编',
                        key: 'zip',
                        width: 100
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 120,
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    }
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    }
                                }, '编辑')
                            ]);
                        }
                    }
                ],
                data4: [
                    {
                        name: '王小明',
                        age: 18,
                        address: '北京市朝阳区芍药居',
                        province: '北京市',
                        city: '朝阳区',
                        zip: 100000
                    },
                    {
                        name: '张小刚',
                        age: 25,
                        address: '北京市海淀区西二旗',
                        province: '北京市',
                        city: '海淀区',
                        zip: 100000
                    },
                    {
                        name: '李小红',
                        age: 30,
                        address: '上海市浦东新区世纪大道',
                        province: '上海市',
                        city: '浦东新区',
                        zip: 100000
                    },
                    {
                        name: '周小伟',
                        age: 26,
                        address: '深圳市南山区深南大道',
                        province: '广东',
                        city: '南山区',
                        zip: 100000
                    },
                    {
                        name: '王小明',
                        age: 18,
                        address: '北京市朝阳区芍药居',
                        province: '北京市',
                        city: '朝阳区',
                        zip: 100000
                    },
                    {
                        name: '张小刚',
                        age: 25,
                        address: '北京市海淀区西二旗',
                        province: '北京市',
                        city: '海淀区',
                        zip: 100000
                    },
                    {
                        name: '李小红',
                        age: 30,
                        address: '上海市浦东新区世纪大道',
                        province: '上海市',
                        city: '浦东新区',
                        zip: 100000
                    },
                    {
                        name: '周小伟',
                        age: 26,
                        address: '深圳市南山区深南大道',
                        province: '广东',
                        city: '南山区',
                        zip: 100000
                    }
                ]
            },
            computed: {
                iconSize: function () {
                    return 14;
                }
            }
        });
    </script>
    [/#if]
[/@mac.page]
